<template>
	<!-- 创建族谱 -->
	<view class="createzupu" :style="'background-image: url('+photo_cdn1+'zpupload/20230908/746055724299c6b0c5.png);'" >
		<view class="zuputextimg">
			<view class="zuputextimg_view">
				<view class="zp_name" v-if="zp_from_title">{{zp_from_title}}</view>
				<image class="itembgimg" :style="'background-image: url('+photo_cdn1+'zpupload/20230905/98b7c66a675b25b9b8.png);'" mode=""></image>
			</view>
			
		</view>
		
		<view class="zupulable_from">
			<view class="lable_cell_items" @tap="toselectpage">
				<view class="lable_names">谱姓</view>
				<view class="lable_input_view">
					<input :disabled="true" class="lable_input_tag" type="text" value="" maxlength="7" v-model="zp_from_title" placeholder="请选择本谱的姓氏" ></input>
				</view>
			</view>
			
			<view class="lable_cell_items">
				<view class="lable_names">谱书名称</view>
				<view class="lable_input_view">
					<input class="lable_input_tag" type="text" value="" v-model="zp_from.title" placeholder="请输入谱书名称" maxlength="7" ></input>
				</view>
			</view>
			
			
			<view class="lable_cell_items" >
				<view class="lable_names">字辈顺序</view>
				<view class="lable_input_view">
					<!-- <input :disabled="true" class="lable_input_tag" type="text" value="" maxlength="7" v-model="zp_from.genealogy" placeholder="请输入谱名" ></input> -->
					
					<textarea class="lable_textarea_tag" v-model="zp_from.genealogy" name="" id="" cols="30" rows="10" placeholder="例如: 天地玄黄宇宙洪荒"></textarea>
					
				</view>
			</view>
			
			
			<view class="lable_cell_items" >
				<view class="lable_names">祖训族规</view>
				<view class="lable_input_view">
					<!-- <input :disabled="true" class="lable_input_tag" type="text" value="" maxlength="7" v-model="zp_from.family_regulation" placeholder="请输入谱名" ></input> -->
					
					<textarea class="lable_textarea_tag" v-model="zp_from.family_regulation" name="" id="" cols="30" rows="10" placeholder="祖训族规"></textarea>
					
				</view>
			</view>
			
			
			
			
			<!-- <picker  @change="bindPickerChange" @columnchange="columnchange" mode ='multiSelector' :value="pickerValue" :range="type_array" range-key="name" > -->
			<!-- </picker> -->
				
			<lpicker v-model="trueAddr" @clearelech="clearelech" @select="lpicker_select">
				<view class="lable_cell_items">
					<view class="lable_names">祖籍</view>
					<view class="lable_input_view">
						<input class="lable_input_tag" disabled="disabled" type="text" value="" v-model="trueAddr"  placeholder="请输入祖籍" ></input>
					</view>
				</view>
			</lpicker>
			
			
			<view class="lable_cell_items">
				<view class="lable_names">古称</view>
				<view class="lable_input_view">
					<input class="lable_input_tag" type="text" value="" v-model="zp_from.gucheng" placeholder="请输入祖籍古称" ></input>
				</view>
			</view>
		
			<picker @change="bindPickerChange" :value="pu_type" :range="type_array">
				<view class="lable_cell_items">
					<view class="lable_names">族谱类型</view>
					<view class="lable_input_view">
						<input class="lable_input_tag" disabled="disabled" type="text" value="" v-model="type_array[pu_type]"  placeholder="请选择类型" ></input>
					</view>
				</view>
			</picker>
			
			<view class="lable_cell_items">
				<view class="lable_names">现居地址</view>
				<view class="lable_input_view">
					<input class="lable_input_tag" type="text" value="" v-model="zp_from.address" placeholder="请输入详细地址" ></input>
				</view>
			</view>
			
			
			<view class="lable_cell_items">
				<view class="lable_names">创建人</view>
				<view class="lable_input_view">
					<input :disabled="zp_id?true:false" class="lable_input_tag" type="text" value="" v-model="zp_from.realname" placeholder="请输入创建人" ></input>
				</view>
			</view>
			
		</view>
		
		<view class="sub_footbtn">
			<view class="sub_button" @tap="createFamilyfun">确认</view>
		</view>
		
	</view>
</template>

<script>
	import {createFamily,getAddressList} from "@/utils/api/zupu.js";
	import {addFamily,familyInfo,updateFamily,getAddrInfo} from "@/utils/api/zupu.js";
	import config from "@/utils/config.js";
	let {staticurl,photo_cdn1} = config.baseUrl;
	
	import {
		getUserinfo
	} from "@/utils/api/api.js";
	export default {
		data() {
			return {
				staticurl,
				photo_cdn1,
				zp_from_title:"",
				zp_from:{
					
					surname_id:"",//姓氏id
					title:"",//谱名
					province_id:"",//省id
					city_id:"",//市id
					area_id:"",//区县id
					town_id:"",//街道id
					village_id:"",//村管委会
					// title:"",//族谱名称
					address:"",//详细地址
					realname:"",//创建人姓名
					genealogy:"",//字辈
					gucheng:"",//祖籍古称
					family_regulation:"",//祖训族规
					
				},
				trueAddr:"",//祖籍文字
				zp_id:"",//修改的时候只能修复 祖籍和详细地址
				
				type_array: ['家谱', '族谱'],
				pu_type: -1,
				select_surname_name:"",
				userInfo:{},
			}
		},
		async onLoad(options) {
			this.getUserinfofun();
			
			this.zp_id = options.id?options.id:"";
			if(this.zp_id){
				uni.setNavigationBarTitle({
					title:"修改族谱",
				})
				await this.familyInfofun();
			}
		},
		onShow() {
			let select_surname_name = uni.getStorageSync("select_surname_name");
			this.select_surname_name = select_surname_name;
			let st_surname_id = uni.getStorageSync("st_surname_id");
			if(select_surname_name){
				uni.setStorageSync("select_surname_name","");
				uni.setStorageSync("st_surname_id","");
				this.zp_from_title = select_surname_name + "氏" + this.type_array[this.pu_type==-1?0:this.pu_type];
				this.zp_from.surname_id = st_surname_id;
			}
		},
		methods: {
			//修改的时候获取信息
			async familyInfofun(){
				let res = await  familyInfo({
					id:this.zp_id,
				})
				// console.info("res",res);
				if(res.code==1){
					this.zp_from = {
						surname_id:res.data.surname_id,//姓氏id
						province_id:res.data.province_id,//省id
						city_id:res.data.city_id,//市id
						area_id:res.data.area_id,//区县id
						town_id:res.data.town_id,//街道id
						village_id:res.data.village_id,//村管委会
						address:res.data.address,//详细地址
						realname:res.data.realname,//创建人姓名
						family_regulation:res.data.family_regulation,//祖训族规
						genealogy:res.data.genealogy,
						title:res.data.title,//族谱名称
						gucheng:res.data.gucheng,//祖籍古称
					};
					this.zp_from_title = res.data.family_name + "氏族谱";
				}
				
				//解析选择的省市区文字
				let search_id = "",search_type = "";
				if(this.zp_from.area_id){
					search_id = this.zp_from.area_id;
					search_type = 3;
				}
				if(this.zp_from.town_id){
					search_id = this.zp_from.town_id;
					search_type = 2;
				}
				if(this.zp_from.village_id){
					search_id = this.zp_from.village_id;
					search_type = 1;
				}
				
				//获取地址id 代表的文字
				let restwo = await getAddrInfo({
					ID:search_id,
					type:search_type,
				});
				if(restwo.code==1){
					let trueAddr = "";
					if(restwo.data.area){
						trueAddr+= restwo.data.area.MergerName;
					}
					if(restwo.data.town){
						trueAddr+= restwo.data.town.name;
					}
					if(restwo.data.village){
						trueAddr+= restwo.data.village.name;
					}
					this.trueAddr = trueAddr;
				}
			},
			//选择族谱类型
			bindPickerChange: function(e) {
			    console.log('picker发送选择改变，携带值为', e.detail.value)
			    this.pu_type = e.detail.value;
				
				if(this.select_surname_name){
					this.zp_from_title = this.select_surname_name + "氏" + this.type_array[this.pu_type?this.pu_type:0];
				}
				
			},
			//前往选择 姓
			toselectpage(){
				if(this.zp_id){//修改的时候只能修复祖籍和详细地址~
					return false;
				}
				uni.navigateTo({
					url:"/pages/zupu/choice_surname/choice_surname?source=1",
				})
			},
			//清楚选中的五级地址数据
			clearelech(e){
				this.zp_from.province_id = "";
				this.zp_from.city_id = "";
				this.zp_from.area_id = "";
				this.zp_from.town_id = "";
				this.zp_from.village_id = "";
			},
			//监听五级地址选中
			lpicker_select(e){
				this.zp_from.province_id = e.province_id;
				this.zp_from.city_id = e.city_id;
				this.zp_from.area_id = e.area_id;
				this.zp_from.town_id = e.town_id;
				this.zp_from.village_id = e.village_id;
			},
			//创建族谱
			async createFamilyfun(){
				if(!this.zp_from.realname){
					this.$api.msg("创建人不能为空");
					return false;
				}
				
				if(!this.zp_from.genealogy){
					this.$api.msg("字辈不能为空");
					return false;
				}
				
				if(!this.zp_from.address){
					this.$api.msg("详细地址不能为空!");
					return false;
				}
				
				if(!this.zp_from.province_id){
					this.$api.msg("请选择省市区!");
					return false;
				}
				
				if(!this.zp_from.surname_id){
					this.$api.msg("请选择族谱姓氏!");
					return false;
				}
				if(this.pu_type==-1){
					this.$api.msg("请选择族谱类型!");
					return false;
				}
				let res = {};
				let userinfo = uni.getStorageSync("userinfo");
				if(this.zp_id){
					//修改
					let params = {...this.zp_from};
					params.fastim_id = userinfo.id;//im id
					res = await  updateFamily({...params,id:this.zp_id});
				}else{
					//添加
					let params = {...this.zp_from};
					params.fastim_id = userinfo.id;////im id
					res = await  addFamily({...params,type:this.pu_type+1});
				}
				this.$api.msg(res.msg);
				if(res.code==1){
					setTimeout(()=>{
						uni.navigateBack();
					},1500)
				}else{
					
				}
			},
			// type_array
			
			async getUserinfofun() {
				let res  = await getUserinfo({
			
				})
				if(res.code==1){
					this.userInfo = res.data.userinfo;
					if(res.data.userinfo.is_shaikh==1){
						this.type_array = ['家谱', '族谱'];
					}else{
						this.type_array = ['家谱'];
					}
				}
				
			},
		}
	}
</script>

<style lang="scss">
	@import "./createzupu.scss";
</style>
